<template name="ver">
    <h2>Ver Usuarios</h2>
    <div id="borrar" title="Desea borrar este usuario?" style="display: none">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><strong>Atenci&oacuten!</strong><br/>Al borrar a este usuario, este no podr&aacute; volver a utilizar el sistema. Desea continuar?</p>
    </div>
    {{pagination}}
    <br/>
    <div id="datos_acceso">
        <div id="datos_acceso_cerrar">[X]</div>
        <div id="datos_acceso_nombre">Datos de login para <span id="acceso_username">Sarasa</span></div>
        <div id="datos_acceso_container">
            <div id="datos_acceso_key"><strong>Key para ingreso manual:</strong> <span id="acceso_key">AAAAAAAAA</span></div>
            <br/>
            <div id="datos_acceso_ocr_text"><strong>OCR para ingreso autom&aacute;tico:</strong></div>
            <br/>
            <div id="datos_acceso_ocr"></div>
        </div>
    </div>
    <table style="width: 90%">
        <tr>
            <th>Usuario</th>
            <th>Email</th>
            <th>Acciones</th>
        </tr>
        <template name="usuario">
        <tr>
            <td>{{username}}</td>
            <td>{{email}}</td>
            <td>
                <div class="editar" idElemento="{{iduser}}">Editar</div>
                <div class="borrar" idElemento="{{iduser}}">Borrar</div>
                <div class="datos_acceso" idElemento="{{iduser}}" id="datos_acceso_{{iduser}}" secret="{{user_secret}}" username="{{username}}">Datos de Acceso</div>
            </td>
        </tr>
        </template>
		<template name="sin_resultados">
		<tr>
			<td colspan="3">No hay resultados para mostrar.</td>
		</tr>
		</template>
    </table>
    <script type="text/javascript">
        $(function(){
            $('.editar').button( { icons: {primary: "ui-icon-note"} } ).bind('click', function() { editar($(this).attr('idElemento')); } );
            $('.borrar').button( { icons: {primary: "ui-icon-circle-close"} } ).bind('click', function() { borrar($(this).attr('idElemento')); } );
            $('.datos_acceso').button( { icons: {primary: "ui-icon-person"} } ).bind('click', function() { showAcceso($(this).attr('idElemento'), $(this).attr('username'), $(this).attr('secret')); } );
            $("#datos_acceso_cerrar").button( {icons: {primary: "ui-icon-circle-close"} , text: false } ).bind('click', function() { hideAcceso(); } );
        });

        function showAcceso(id, username, secret)
        {
            $('#datos_acceso').attr('opener', id).fadeIn('fast');
            $('#acceso_username').html(username);
            $('#acceso_key').html(secret);
            $('#datos_acceso_ocr').html('<img src="{{get_ocr_url}}'+id+'" />')
        }

        function hideAcceso()
        {
            $('#datos_acceso').fadeOut('fast');
        }

        function editar(id)
        {
            document.location.href = '{{edit_action}}'+id;
        }

        function borrar(id)
        {
            $("#borrar").dialog({
                resizable: false,
                height:240,
                modal: true,
                buttons:
                {
                    "Borrar": function() {
                        $( this ).dialog( "close" );
                        document.location.href = '{{delete_action}}'+id;
                    },
                    "Cancelar": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        }

        function acceso(id)
        {

        }

    </script>
</template>